import ArticleComponentLess from "./ArticleComponent.module.less";
import { fetchArticles } from "@/store/modules/searchArticle";
import { useSelector, useDispatch } from "react-redux";
import { extractTextFromHTML } from "@/utils/PublicFunction";
import { useSearchParams } from "react-router-dom";
import { formatRelativeTime } from "@/utils/PublicFunction.ts";
import React, { useEffect, useState } from "react";
import { Select, Space } from "antd";
import {
  LikeOutlined,
  CommentOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
function ArticleComponent() {
  const [PageSize] = useState(10);
  const [PageNum, setPageNum] = useState(1);
  const [getSearchArr] = useSearchParams();
  const dispatch = useDispatch();
  const ArticleList = useSelector(
    (state: any) => state.searchArticle.ArticleList
  );
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  useEffect(() => {
    dispatch(
      fetchArticles({ SearchKey: getSearchArr.get("SearchKey"), type: 0 })
    );
  }, []);
  const LeftTab = [
    {
      id: 1,
      sortName: "综合排序",
    },
    {
      id: 2,
      sortName: "最新优先",
    },
    {
      id: 3,
      sortName: "最热优先",
    },
  ];
  const LookArticleDetails = (ArticleId: number) => {
    window.open("/articleDetail/" + ArticleId, "_blank", "noreferrer");
  };
  return (
    <>
      <div className={ArticleComponentLess.Article_content}>
        <div className="pageList">
          <div className="top_select">
            <div className="left_tab">
              {LeftTab.map((item) => {
                return (
                  <div className="left_items" key={item.id}>
                    {item.sortName}
                    {item.id !== 3 && <span className="center_l"></span>}
                  </div>
                );
              })}
            </div>
            <div className="right_select">
              <Select
                defaultValue=""
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: "", label: "时间不限" },
                  { value: "1", label: "最近一天" },
                  { value: "3", label: "最近三天" },
                  { value: "30", label: "最近一月" },
                ]}
              />
            </div>
          </div>
          <div className="bottom_article_list">
            {ArticleList.map((item: any) => {
              return (
                <div
                  className="article_items"
                  key={item.ArticleId}
                  onClick={() => LookArticleDetails(item.ArticleId)}
                >
                  <div className="top_info">
                    <div className="author_name">{item.PublisherName}</div>
                    <div className="point">·</div>
                    <div className="time">
                      {formatRelativeTime(item.PublishTime)}
                    </div>
                    <div className="point">·</div>
                    <div className="tab">
                      {item.ArticleTabs.split(",").map(
                        (itemTabs, index: number) => {
                          return (
                            <span key={index}>
                              <span>{itemTabs}</span>
                              {item.ArticleTabs.split(",").length !==
                                index + 1 && <span> / </span>}
                            </span>
                          );
                        }
                      )}
                    </div>
                  </div>
                  <div className="bottom_content">
                    <div className="left_article_info">
                      <div className="title_all">{item.ArticleTitle}</div>
                      <div className="article_abstract">
                        {extractTextFromHTML(item.ArticleContent)}
                      </div>
                      <div className="likeAndComment">
                        <div className="icon">
                          <LikeOutlined />
                          <div className="num">{item.LikeNum}</div>
                        </div>
                        <div className="icon">
                          <CommentOutlined />
                          <div className="num">{item.CommentNum}</div>
                        </div>
                        <div className="icon">
                          <ShareAltOutlined />
                        </div>
                      </div>
                    </div>
                    <div className="right_img">
                      <img src={item.ArticleImgUrl} alt="" />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}

export default ArticleComponent;
